<template>
    <div id="home">
        <van-notice-bar
        left-icon="volume-o"
        text="家人们，萌宠小♥正式上线了，欢迎大家关注公众号一起体验，相应小程序即将上线"
        background=rgb(86,170,202)
        color=rgb(190,255,182)
        mode="closeable"
        />      <!--搜索框-->
    <!-- <div class="search">
     <van-search placeholder="请输入关键字搜索" value="" background="transparent"/>
    </div> -->
    <div class="banner">
        <van-swipe :autoplay="3000" :height="150"> 
            <van-swipe-item v-for="(image, index) in images" :key="index">
                <img v-lazy="image" style="width:100%;height:150px" />
            </van-swipe-item>
        </van-swipe>
    </div>
    
        <!--九宫格分类-->
        <div class="classify">
            <van-grid icon-size="40" clickable="true" border="true">
                <van-grid-item icon="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2578258195,1728121228&fm=26&gp=0.jpg" text="宠物社区" to="/communtiy" />
                <van-grid-item icon="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3291087982,4089121336&fm=26&gp=0.jpg" text="宠物百科" to="/questionsPanel"/>
                <van-grid-item icon="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2396886821,4020261300&fm=26&gp=0.jpg" text="宠物医疗" to="" />
                <van-grid-item icon="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3607212227,1160797799&fm=15&gp=0.jpg" text="在线咨询" />
            </van-grid>
        </div>
        <!--
            商品列表
        -->
        <div class="list" :style="`height:${height}`">
            <!-- <iframe src="//player.bilibili.com/player.html?aid=83539722&cid=142915794&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe> -->
            <div v-for="(data,index) in listDatas" :key="index" class="list_data">
            <van-card
                tag="托管"
                title="布偶猫"
                thumb="https://dss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2052372606,1200247783&fm=179&app=42&f=JPEG?w=121&h=121"
             >
             <p slot="desc">本人由于工作问题，现在为小宠物找一个新的归宿，要求领养者爱护她，本人愿意免费赠送</p>
                <span slot="bottom">联系电话：<a href="tel:17693151456">17693151456</a></span>
            </van-card>
            </div>
        </div>

        <van-sku
         v-model="show"
        :sku="sku"
        :goods="goods"
        :goods-id="goodsId"
        :show-soldout-sku="showSoldoutSku"
        @buy-clicked="onBuyClicked"
        @add-cart="onAddCartClicked"
        />
    </div>
</template>
<script>
//import BMap from 'BMap'
export default {
    data(){
        return{
             images:['http://img1.imgtn.bdimg.com/it/u=4113631089,4270474622&fm=11&gp=0.jpg',"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2241316481,3501737022&fm=26&gp=0.jpg"],
             listDatas:[1,2,32,4,5,65,7,87,45,45,45,4545,454,545,45],
             show:false,
             quota:100,
             price:'10000',
             showSoldoutSku:true,
             goodsId:1,
             center:'',
             currentCity:'',
             cityCode:'',
             sku:{
                 tree:[{
                        k: '颜色', // skuKeyName：规格类目名称
                        v: [
                            {
                            id: '30349', // skuValueId：规格值 id
                            name: '红色', // skuValueName：规格值名称
                            imgUrl: 'https://img30.360buyimg.com/pop/s590x470_jfs/t1/89628/21/13857/77624/5e5f15e7E8fdeba17/b484f3aaf34ec7b5.jpg.webp', // 规格类目图片，只有第一个规格类目可以定义图片
                            previewImgUrl: 'https://img30.360buyimg.com/pop/s590x470_jfs/t1/89628/21/13857/77624/5e5f15e7E8fdeba17/b484f3aaf34ec7b5.jpg.webp', // 用于预览显示的规格类目图片
                            },
                            {
                            id: '1215',
                            name: '蓝色',
                            imgUrl: 'https://img30.360buyimg.com/pop/s590x470_jfs/t1/89628/21/13857/77624/5e5f15e7E8fdeba17/b484f3aaf34ec7b5.jpg.webp',
                            previewImgUrl: 'https://img30.360buyimg.com/pop/s590x470_jfs/t1/89628/21/13857/77624/5e5f15e7E8fdeba17/b484f3aaf34ec7b5.jpg.webp',
                            }
                        ],
        // k_s: 's1' // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
             }],
             price:'1000'
         },
            goods:{
            // 默认商品 sku 缩略图
            picture: 'https://img30.360buyimg.com/pop/s590x470_jfs/t1/89628/21/13857/77624/5e5f15e7E8fdeba17/b484f3aaf34ec7b5.jpg.webp',
            price:'1000'
            },
             height:'',
        }
       
    },
    methods:{
        openInfo(event){
            //this.$router.push({path:'/infoList'})
           // this.show=true
        },
        getHeight(){
            this.height = window.innerHeight-40-200-96+'px'
        },
        getLocaltion(){
           let myCity = new BMap.LocalCity()
           const _this=this;
            myCity.get(function (result) {
                console.log(result)
                _this.currentCity=result.name;
                _this.cityCode=result.code;
                _this.center=result.center;
            })
        }
    },
    created(){
        this.getHeight();
        this.getLocaltion()
    }
}
</script>

<style scoped>
    .classify{
        margin-top: .4rem;
    }
    .list{
        margin-top: .2rem;
        overflow-y: scroll;
        width: 100%;
        margin-bottom: .2rem;
    }
    .list_data{
        margin: .1rem;
    }
      /* .search{
        position: absolute;
        z-index: 1;
        width: 80%;
        padding-left: 2.5rem;
        padding-right: 3rem;
    }
    .banner{
        position: relative;
    }    */
</style>

